<template>
	<view id="user-point">
		<view class="point-ul" v-if="pointArr.length > 0">
			<view class="point-li" v-for="(item,index) in pointArr" :key="index">
				<view class="li-title">
					<view >其他项目名称</view>
					<image src="/static/images/icon_wen_01.png" @click="showTip(index)" class="wen-icon" mode=""></image>
					<view :class="['li-tips',showIndex ==index?'tips-act':'']">对接积分释放，根据消费积分的1%释放到消费冻结积分里</view>
					
				</view>
				<view class="li-row">
					<view>总积分</view>
					<view>{{item.credit || 0}}</view>
				</view>
				<view class="li-row">
					<view>已释放</view>
					<view>{{item.freed || 0}}</view>
				</view>
				<view class="li-row">
					<view>释放百分比</view>
					<view>{{item.freed_bili || 0}}</view>
				</view>
				<view class="li-bom">
					<view>预计释放截止日</view>
					<view>{{item.createTime}}</view>
				</view>
			</view>
		</view>
		
		<view class="no-ul" v-else>
			--暂无更多数据--
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			pointArr: [1,2],
			page: 1,
			totalPage: 1,
			showIndex: -1,
		};
	},
	onLoad() {
		this.getList();
	},
	components: {

	},
	onShow() {

	},
	methods: {
		// 显示提示文字
		showTip(index){
			if(this.showIndex == index) return this.showIndex = -1;
			this.showIndex = index;
			// uni.showToast({
			// 	title: `对接积分释放，
			// 	根据消费积分的1%释放到消费冻结积分里`,
			// 	icon: 'none',
			// 	duration: 2000,
			// })
			// this.$api.msg('对接积分释放，根据消费积分的1%释放到消费冻结积分里')
		},
		// 获取列表
		getList(){
			this.$Request.request('/api/users/usercredit','get',{
				page: this.page,
				limit: 6,
			}).then((res)=>{
				if(res.status == 1){
					let result = res.data;
					this.totalPage = result.last_page;
					if(this.page == 1){
						this.pointArr = result.data;
					}else {
						this.pointArr.push(...result.data);
					}
				}
			})
		},
	},
	onReachBottom() {
		if (this.page >= this.totalPage) return
		this.page++
		this.getList()
	},
};
</script>

<style>
	page {
		background: #F5F5F5;
	}
</style>

<style scoped lang="scss">
	.point-ul {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		.point-li {
			width: 100%;
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 28rpx;
			.li-title,.li-row,.li-bom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0px 32rpx 18rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #7A7C80;
				line-height: 36rpx;
				position: relative;
				.li-tips {
					position: absolute;
					padding: 18rpx 15rpx;
					box-sizing: border-box;
					width: 272rpx;
					height: 140rpx;
					box-shadow: 0px 8rpx 18rpx 0px rgba(0,0,0,0.18);
					border-radius: 16rpx;
					background: #fff;
					right: 32rpx;
					top: 84rpx;
					font-size: 24rpx;
					color: #1D1E22;
					z-index: 11;
					opacity: 0;
				}
				.tips-act {
					opacity: 1;
				}
			}
			.li-row:last-child {
				padding-bottom: 34rpx;
			}
			.li-title {
				padding: 28rpx 32rpx 34rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				color: #1D1E22;
				font-weight: 500;
				.wen-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
			.li-bom {
				padding-top: 24rpx;
				border-top: 2rpx solid #EDEDED;
				padding-bottom: 32rpx;
			}
		}
	}
	
	.no-ul {
		padding: 200rpx 80rpx;
		text-align: center;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #7A7C80;
	}
</style>
